<template>
    <div>
        <div class="e-form">
            <BillTop  @cancel="handleClose"></BillTop>
            <div class="tabs" style="margin-bottom: 120px">
                <div class="tabs-title">基本信息</div>
                <div style="width: 100%" class="form">
                    <el-form :model="basicForm" :label-width="formLabelWidth">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="计划编号：">
                                    <span>{{ basicForm.number }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="年度需用计划：">
                                    <div style="display: flex">
                                                <div >{{basicForm.annualDemandPlanBillNo}}</div>

                                           <el-button class="a"
                                            @click="clickToYearNeedPlan"
                                            >查看</el-button
                                        >
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="采购方式：">
                                    <span>
                                                {{
                                                    basicForm.businessType == 0
                                                        ? '自购'
                                                        : '租赁'
                                                }}
                                            </span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="变更日期：">
                                  <el-date-picker
                                        value-format="yyyy-MM-dd"
                                        :clearable="false"
                                        type="date"
                                        placeholder="选择日期"
                                        v-model="basicForm.planDate"
                                    ></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="要签合同：">
                                      <span>
                                                {{
                                                    basicForm.isSignContract==1?"是":'否'
                                                }}
                                            </span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="计划金额（元）：">
                                            <span>{{ basicForm.amount }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
 <el-row>
                                    <el-col :span="12">
                                        <el-form-item
                                            label="税率%："
                                            prop="taxRate"
                                        >
                                            <el-input
                                                v-model="basicForm.taxRate"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item
                                            label="税额："
                                            prop="taxAmount"
                                        >
                                            <el-input
                                                v-model="basicForm.taxAmount"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="币种：">
                                           {{ basicForm.currency }}
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="人民币汇率：">
                                    <span>{{ basicForm.rmbRate }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="单据机构：">
                                    <span>{{ basicForm.orgName }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="传财务共享：">
                                    <span>{{ basicForm.state }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="备注：">
                                      <span>{{ basicForm.remarks }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="本位币：">
                                    <span>{{ basicForm.baseCurName }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="本位币汇率：">
                                    <span>{{
                                        basicForm.baseCurRate
                                    }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                     <el-form-item
                                    label="填报人："
                                >
                                    <span>{{ basicForm.preparer }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="状态：">
                                         <span>{{ stateArr[basicForm.state] }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="作废人：">
                                       <span>{{ basicForm.nullifyCreator }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="作废原因：">
                                        <span>{{ basicForm.nullifyReason }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="作废说明：">
                                       <span>{{ basicForm.nullifyDesciption }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div class="buttons">
<span class="tip"
        ><span style="color: red; margin-right: 0">*</span>为必填项</span
      >
                <el-button
                    type="primary"
                    size="small"
                    style="background: #2e61d7"
                    @click="addSave"
                    >保存</el-button
                >

                <el-button size="small" @click="handleClose">关闭</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import planRequest from '@/api/turnover/plan.js'
import { openAppClient } from '@/utils/common'

export default {
    data () {
        return {
            //基础信息
            basicForm: {
                'amount': 0,
                'amountChanged': 0,
                'annualDemandPlanBillId': '',
                'annualDemandPlanBillNo': '',
                'baseCurAmt': 0,
                'baseCurAmtChanged': 0,
                'baseCurId': '',
                'baseCurName': '',
                'baseCurRate': 0,
                'billId': '',
                'billNo': '',
                'businessType': 0,
                'currency': '',
                'currencyId': '',
                'easId': '',
                'isSignContract': 0,
                'nullifyCreated': '',
                'nullifyCreator': '',
                'nullifyCreatorId': '',
                'nullifyDescription': '',
                'nullifyReason': '',
                'orgId': '',
                'orgName': '',
                'period': 0,
                'planDate': '',
                'preparer': '',
                'preparerId': '',
                'remarks': '',
                'rmbAmt': 0,
                'rmbAmtChanged': 0,
                'rmbId': '',
                'rmbName': '',
                'rmbRate': 0,
                'state': '',
                'taxAmount': 0,
                'taxRate': 0,
                'temporaryDemandPlanBillId': '',
                'temporaryDemandPlanBillNo': '',
                'workId': ''
            },
            formLabelWidth: '180px',
            currencyArr: [], //币种列表
            stateArr: ['草稿', '审核中', '已审核', '已作废'],
            yearNeedPlanList: [],
            id: null,
        }
    },
    created () {
        this.id = this.$route.query.billid

        this.getUserInfo()
        this.getYearNeedPlanList()
    },

    methods: {
        //获取本地登录信息
        getUserInfo () {
            const userInfo = JSON.parse(window.localStorage.getItem('vuex')).userInfo.orgInfo
            this.basicForm.orgId = userInfo.orgId
            this.basicForm.orgName = userInfo.orgName
            planRequest
                .turnoverTemporaryDemandPlanChangedInitChange(this.id)
                .then(res => {
                    for (let key in res) {
                        this.basicForm[key] = res[key]
                    }
                })
        },

        getYearNeedPlanList () {
            this.$Ajax
                .httpPost({
                    url: '/turnover/annualDemandPlan/listByEntity',
                    params: this.query,
                })
                .then(res => {
                    this.yearNeedPlanList = res.list
                })
        },
        //选择币种的事件
        changeCurrency () {
            const obj = this.currencyArr.find(item=>item.kvKey === this.basicForm.currency)
            this.basicForm.currencyId = obj.kvId
        },
        changePlan () {
            const obj = this.yearNeedPlanList.find(item=>item.id === this.basicForm.annualDemandPlanId)
            this.basicForm.annualDemandPlan = obj.number
        },
        clickToYearNeedPlan () {
            let billid = this.basicForm.annualDemandPlanBillId
            if (!billid) {
                this.clientPop('err', '请选择年度需用计划！')
                return
            }
            // 客户端弹窗弹出本地页面
            openAppClient(`/yearNeedPlanShow?billid=${billid}&isview=true`, '年度需用计划')
        },
        //基本信息保存
        addSave () {
            this.basicForm.isSignContract ? this.basicForm.isSignContract = 1 : this.basicForm.isSignContract = 0
            console.log(this.basicForm)
            this.$Ajax
                .httpPost({
                    url: '/turnover/temporaryDemandPlanChanged/create',
                    params: this.basicForm
                })
                .then(res => {
                    this.clientPop('info', '保存成功!是否进行下一步操作？', ()=>{
                        this.$router.push({
                            path: '/momentNeedPlanChangeEdit',
                            query: {
                                billid: res,
                                name: 'detailed'
                            }
                        })
                    },
                    null,
                    this.handleClose
                    )
                })
        },
        //取消
        handleClose () { this.$router.replace('/momentNeedPlanList')}
    }
}
</script>

<style lang="scss" scoped>
.buttons {
    left: 0;
}
.e-form {
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}
.e-table {
    min-height: auto;
    background: #fff;
}
.separ {
    width: 30px;
    height: 40px;
    line-height: 18px;
    text-align: center;
}
.upload {
    margin: 20px auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

.upload-demo {
    display: flex;
    justify-content: center;
    align-items: center;
}

::v-deep.el-input--suffix .el-input__inner {
    padding-right: 5px;
}
::v-deep.el-table .cell {
    text-align: center;
}
</style>
